<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card >
            <el-button effect="dark" type="primary" plain
                       style="width: 100%; height: 150px; border: none; font-size: larger" @click="amountChange(100)">
              <i class="el-icon-bottom"></i>充值100元
            </el-button>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-card >
            <el-button effect="dark" type="success" plain
                       style="width: 100%; height: 150px; border: none; font-size: larger" @click="amountChange(200)">
              <i class="el-icon-right"></i>充值200元
            </el-button>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card>
            <el-button effect="dark" type="info" plain
                       style="width: 100%; height: 150px; border: none; font-size: larger" @click="amountChange(500)">
              <i class="el-icon-bottom"></i>充值500元
            </el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card body-style="{ padding: '0px' }">
            <el-button effect="dark" type="warning" plain
                       style="width: 100%; height: 150px; border: none; font-size: larger" @click="amountChange(1000)">
              <i class="el-icon-right"></i>充值1000
            </el-button>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-card body-style="{ padding: '0px' }">
            <el-button effect="dark" type="danger" plain
                       style="width: 100%; height: 150px; border: none; font-size: larger" @click="amountChange(2000)">
              <i class="el-icon-check"></i>充值2000元
            </el-button>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card>
            <el-button effect="dark" type="primary" plain disabled
                       style="width: 100%; height: 150px; border: none; font-size: larger; " @click="amountChange(0)">
              <i class="el-icon-back"></i>自定义充值(敬请期待)
            </el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {userCharge} from "@/API/UserAPI";
import {Message} from "element-ui";

export default {
  name: "Charge",
  data() {
    return {
      amountVal: '',
      disabled: false,
      //充值参数
      rechargeParams: {
        totalAmt: '', //金额
        paymentType: "0", //支付方式[0:微信,1:支付宝,2:余额,3:活动]
      }
    }
  },
  methods: {
    //充值金额
    amountChange(val) {
      console.log(val);
      this.rechargeParams.totalAmt = val;
      if (val == '') {
        this.disabled = false
      } else {
        this.disabled = true
      }
      this.isSure(val);
    },
    //支付方式
    paymentTypeChange(val) {
      this.rechargeParams.paymentType = val
    },
    isSure(val) {
      this.$confirm('是否充值' + val + '元?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.surePay();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消充值'
        });
      });
    },
    //确认支付
    async surePay() {
      try {
        if (this.rechargeParams.totalAmt == '') {
          this.$message.warning('请输入金额');
          return;
        }
        const result = await userCharge(this.rechargeParams.totalAmt);
        if (result.code === 1) {
          alert("充值成功！");
          Message.success("充值成功");
        } else {
          alert("充值失败！");
          Message.error("充值失败");
        }
      } catch (error) {
        console.log(error)
        this.$message.error('登录失败')
      }
    }
  },

}
</script>

<style scoped>
/* 信息列表样式 */
.msg-box > li {
  list-style: none;
  border-bottom: 1px solid #c5c5c5;
}

.msg-box li {
  line-height: 250%;
  padding-bottom: 2%;
}

.bg-purple {
  background: #d3dce6;
}

.box-card {
  height: 700px;
  width: 750px;
}

.button {
  height: 30px;
  width: 120px;
}

</style>